<template>
  <el-dialog title="提示" :visible.sync="dialogVisible" width="500px" :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="功能名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="功能编码">
        <el-input v-model="form.code"></el-input>
      </el-form-item>
      <el-form-item label="排序编号">
        <el-input v-model="form.sort"></el-input>
      </el-form-item>
      <el-form-item label="选择父类">
        <el-select v-model="form.parentId" placeholder="请选择父类">
          <el-option v-for="item in dataSource" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="显示地址">
        <el-select v-model="form.addressId" placeholder="请选择显示地址">
          <el-option v-for="item in listAddress" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="功能路径">
        <el-input v-model="form.path"></el-input>
      </el-form-item>
      <el-form-item label="图标">
        <el-upload class="avatar-uploader" :action="baseApi + '/upload/menus'"
          :headers="{ Authorization: 'Bearer ' + this.$store.getters.token }" :show-file-list="false"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="form.pathImg" :src="baseApi + form.pathImg" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="显示时间">
        <el-date-picker v-model="form.startDate" type="date" value-format="yyyy-MM-dd" placeholder="开始时间">
        </el-date-picker>
        <el-date-picker v-model="form.endDate" type="date" value-format="yyyy-MM-dd" placeholder="结束时间">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="sub">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { menuAddressSelect, menuAdd, menuUpdate } from '@/api/menus'
import { mapGetters } from 'vuex'
export default {
  name: 'InternetHospitalMangeEdit',
  computed: {
    ...mapGetters([
      'imagesUploadApi',
      'baseApi'
    ])
  },
  data() {
    return {
      dialogVisible: false,
      form: {},
      listAddress: []
    }
  },
  props: ['dataSource'],

  mounted() {
    this.menuAddressSelect()
  },

  methods: {
    menuAddressSelect() {
      menuAddressSelect({}).then(res => {
        let list = []
        this.listAddress = res;
        res.forEach(item => {
          list.push(item)
        })
      })
    },
    handleAvatarSuccess(res, file) {
      // this.$set(this.form, 'storagePath', this.baseApi + '/file/' + res.data.path)
      this.$set(this.form, 'pathImg', res.result)
    },
    beforeAvatarUpload(file) {
      const supportedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/webp'];
      const isValidType = supportedTypes.includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 50;

      if (!isValidType) {
        this.$message.error('上传图标只能是图片格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 50MB!');
      }
      return isValidType && isLt2M;
    },
    show(row = {}) {
      this.dialogVisible = true;
      this.form = { ...row }
    },
    sub() {
      if (this.form.id) {
        menuUpdate(this.form).then(res => {
          this.dialogVisible = false;
          this.$emit('修改成功')
          this.$emit('refersh')
        })
      } else {
        menuAdd(this.form).then(res => {
          this.dialogVisible = false;
          this.$emit('新增成功')
          this.$emit('refersh')
        })
      }
    },
    handleClose() {
      this.dialogVisible = false
    }
  },
};
</script>

<style scoped>
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border-radius: 0;
}
</style>